import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, Image } from 'react-native'
import PropTypes from 'prop-types'
import { ScaleS, ScaleT, NAVIGATIONBAR_HEIGHT, STATUSBAR_HEIGHT } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'

export default class HomeHeader extends PureComponent {
  static propTypes = {
    cityName: PropTypes.string,
    cityClick: PropTypes.func,
    searchClick: PropTypes.func
  }

  render () {
    const { cityName, cityClick, searchClick } = this.props
    return (
      <View style={styles.container}>
        <CustomButton style={styles.logo}>
          <Image style={styles.logoImg} source={require('src/imgC/home/header_logo.png')} />
        </CustomButton>
        <View style={styles.containerRight}>
          <CustomButton onPress={searchClick}>
            <CustomImage
              style={styles.search}
              source={require('src/imgC/home/ser.png')}
            />
          </CustomButton>
          <CustomButton style={styles.cityButton} onPress={cityClick}>
            <Text style={styles.cityName}>{cityName}</Text>
            <CustomImage
              style={styles.top}
              source={require('src/imgC/triangle/triangle.png')}
            />
          </CustomButton>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: ScaleS(20),
    paddingTop: STATUSBAR_HEIGHT + ScaleS(4),
    height: NAVIGATIONBAR_HEIGHT,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  logo: {
    width: ScaleS(75),
    height: ScaleS(30)
  },
  logoImg: {
    width: ScaleS(75),
    height: ScaleS(30)
  },
  containerRight: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  cityButton: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  cityName: {
    height: ScaleS(42),
    lineHeight: ScaleS(42),
    fontSize: ScaleT(17),
    fontWeight: '600',
    color: '#3c3c3c'
  },
  top: {
    // marginTop: ScaleS(15),
    width: ScaleS(6),
    height: ScaleS(4),
    marginLeft: ScaleS(6)
  },
  search: {
    width: ScaleS(20),
    height: ScaleS(20),
    marginRight: ScaleS(22)
  }
})
